<template>
    <view class="container">
        <view class="list">
            <block v-if="withdrawList.length > 0">
                <view class="item" v-for="(item, k) in withdrawList" :key="k">
                    <u-icon
                        name="https://img.ionepin.com/f0493e240a8570a3fed61ff5ead6781799b2ef7a.png"
                        width="50rpx"
                        height="50rpx"
                    ></u-icon>
                    <view class="data-info">
                        <view class="data-info-top">
                            <view class="data-info-title">提现-支付宝({{ item.accountId }})</view>
                            <u-text
                                :text="'- ' + item.toMoney"
                                size="26rpx"
                                color="#356CE7"
                                bold
                                align="right"
                            ></u-text>
                        </view>
                        <view class="data-info-bottom">
                            <u-text
                                :text="item.createAt"
                                size="24rpx"
                                color="#888888"
                            ></u-text>
                            <view class="tag complete" v-if="item.state == 'complete'">{{ item.state|stateText }}</view>
                            <view class="tag info" v-else>{{ item.state|stateText }}</view>
                        </view>
                    </view>
                </view>
            </block>
            <u-empty
                mode="data"
                width="400rpx"
                height="400rpx"
                icon="https://img.ionepin.com/dcfe6ae6d90104cbc50c50dd6010c1f8eabee5a3.png"
                class="empty"
                textSize="38rpx"
                v-else
            >
            </u-empty>
            <u-loadmore
                height="50rpx"
                :status="loadStatus"
                v-if="total > 8"
                marginTop="40rpx"
                marginBottom="20rpx"
                fontSize="32rpx"
                iconSize="34rpx"
                line
            />
        </view>
    </view>
</template>

<script>
    import { userWithdrawPage } from "@/config/api"
    export default {
        name: "withdrawState",
        data(){
            return {
                withdrawList: [],
                listQuery: {
                    page: 1,
                    list_rows: 10
                },
                total: 0
            }
        },
        onLoad() {
            this.getData()
        },
        filters: {
            stateText(val) {
                if (val == 'complete') {
                    return "已完成"
                } else if(val == 'wait') {
                    return "待审核"
                } else if(val == 'ing') {
                    return "转账中"
                } else if(val == 'close') {
                    return "已关闭"
                }
            }
        },
        onReachBottom() {
            if (this.total > this.withdrawList.length) {
                this.listQuery.page += 1
                this.getData(true)
            }
        },
        computed: {
            loadStatus() {
                if (this.total > this.withdrawList.length) {
                    return "loading"
                } else {
                    return "nomore"
                }
            },
        },
        methods: {
            async getData(more = false) {
                const res = await userWithdrawPage(this.listQuery)
                if(more) {
                    this.withdrawList = [ ...this.withdrawList,...res.items]
                } else {
                    this.withdrawList = res.items
                }
                this.total = res.total
            }
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        .list {
            padding: 30rpx 20rpx;
            .item {
                margin-top: 65rpx;
                display: flex;
                align-items: flex-start;
                //justify-content: space-between;
                .data-info {
                    margin-left: 15rpx;
                    flex: auto;
                    .data-info-top {
                        display: flex;
                        justify-content: space-between;
                        .data-info-title {
                            font-size: 28rpx;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #000000;
                        }
                    }
                    .data-info-bottom {
                        margin-top: 20rpx;
                        display: flex;
                        justify-content: space-between;
                        .tag {
                            width: 96rpx;
                            height: 40rpx;
                            border-radius: 2px;
                            font-size: 22rpx;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            text-align: center;
                            line-height: 40rpx;
                        }
                        .info {
                            border: 1px solid #356CE7;
                            color: #356CE7;
                        }
                        .complete {
                            color: #999999;
                            background: #EEEEEE;
                            border-radius: 2px;
                        }
                    }
                }
            }
        }
        .empty {
            padding: 100rpx 0;
        }
    }
</style>
